<template>
	<view class="container" v-if="postList.data.length">
		<div class="article_box" v-for="(item,index) in postList.data" :key="index">
			<view class="">
				<div class="user_info">
					<div class="avatar">
						<image :src="userInfo.avatar" mode=""></image>
					</div>
					<div class="name_box">
						<span>{{userInfo?.name}}</span>
						<span v-if="userInfo?.type == 1">管理员</span>
						<span v-if="userInfo?.type == 2">用户</span>
						<span v-if="userInfo?.type == 3">医生</span>

					</div>
					<div class="type_box">
						<span v-if="item.postStatus == 1" class="pre-book already">待审核</span>
						<span v-if="item.postStatus == 2" class="pre-book pass">审核通过</span>
						<span v-if="item.postStatus == 3" class="pre-book notPass">审核不通过</span>
						<span v-if="item.postStatus == 4" class="pre-book delete">已删除</span>
					</div>
				</div>
				<!-- 文章内容区域 -->
				<div class="article_content">
					<div class="title">
						{{item.postTitle}}
					</div>
					<div class="content">
						{{item.postContent}}
					</div>
					<!-- 文章图片展示 -->
					<div v-if="item?.coverImg" class="images">
						<image v-for="(url,index) in item?.images" :key="index" :src="url" mode=""></image>

					</div>

				</div>
			</view>

			<div class="created">
				<span> {{ stringSlicing(item?.createTime || "")}}</span>
				<image @click="deleteArticle(item)" src="/static/删除.png" mode=""></image>
			</div>

		</div>
	</view>
	<view v-else class="">
		<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></up-empty>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import {
		apiForumUserList,
		apiDeletePost,
		deleteOssImage
	} from "@/api/forum.js"


	const userInfo = ref({})

	const postList = reactive({
		data: []
	})
	const stringSlicing = (str) => {
		return str.split('T')[0] + ' ' + str.split('T')[1]
	}

	const goDetalis = (item) => {
		if (item.postStatus != 2) {
			return uni.showToast({
				icon: "none",
				title: "帖子不能查看"
			})
		}
		// 去往详情页面
		uni.navigateTo({
			url: `/pages/articleDetails/articleDetails?postId=${item.postId}&isLike=${false}&isShowLike=${true}`
		})
	}

	// 删除文章
	const deleteArticle = (item) => {
		uni.showModal({
			title: '确认删除此帖子',
			success: async (res) => {
				if (res.confirm) {
					if (item.images.length != 0) {
						//删除帖子的图片
						item.images.forEach(async (ele) => {
							await deleteOssImage(ele)
						})
					}
					//删除帖子
					await apiDeletePost(item.postId)
					uni.showToast({
						title: '删除成功',
						icon: "success",
						duration: 1000
					});
					getInfo()

				}
			}
		});
	}

	//获取帖子信息
	const getInfo = async () => {
		// 获取该用户的帖子列表
		let res = await apiForumUserList({
			userId: userInfo.value.empId
		})

		postList.data = res.data
		postList.data.forEach(ele => {
			if (ele.images != "") {
				ele.images = JSON.parse(ele.images)
			}
		})

	}

	onMounted(async () => {
		//获取用户信息
		let user = await uni.getStorage({
			key: "empleyeeInfo"
		})
		userInfo.value = user.data
		getInfo()
	})
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;

		.article_box {
			// height: 400rpx;
			background-color: #f3f3f3;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: box-sizing;
			margin: 40rpx 0;

			.images {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				image {
					width: 24%;
					margin: 10px 12px 0 0;
					height: 100px;
					border-radius: 8px;

				}

			}

			.created {
				margin-top: 10rpx;
				color: #999;
				display: flex;
				justify-content: space-between;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.article_content {
				width: 100%;

				.title {
					font-size: 42rpx;
					width: 100%;
					height: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-bottom: 20rpx;
				}


				.content {
					height: 100%;
					max-height: 120rpx;
					word-wrap: break-word;
					word-break: break-all;
					font-size: 30rpx;
					-webkit-line-clamp: 3;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}

			.user_info {
				width: 100%;
				height: 120rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name_box {
					display: flex;
					flex: 1;
					justify-content: flex-start;
					padding-left: 20rpx;
					box-sizing: border-box;
					flex-direction: column;

					label:nth-child(1) {
						font-size: 30rpx;
					}
				}

				.pre-book {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 150rpx;
					height: 60rpx;
					border-radius: 40rpx;
					color: #fff;
				}

				.already {
					background-color: #0485e8;
				}

				.pass {
					background-color: #34c300;
				}

				.notPass {
					background-color: #e82d27;
					width: 180rpx;
				}

				.delete {
					background-color: #e80da3;
				}


				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
		}
	}
</style>
